『Form Design Patterns』
https://gyazo.com/92748b28ad548e44c5da1f3b569d1fc4
2019/12/24
手にとった動機
jQueryを使ってる
素のHTMLや素のJavaScriptを使った話も多いので冗長な箇所もある
form libraryを使用していたら自動で解消できるものも割とある
第1章 登録フォーム
非同期validationやってないのは微妙に思うmrsekut.icon
敢えてだったmrsekut.icon
送信後queryがキモくなるがデザインとは関係ないからどうでもいいんかな
フォームの基本的な品質とその考え方
あるマテリアルを別のマテリアルで代替すべきでない
決済フォーム|決済フローのステップごとのデザインパターンの適用
examples
1ページに付き、1つのこと
「1つのこと」っってなんやねんmrsekut.icon
フロー
mrsekut.iconmrsekut.icon
航空券予約フォーム|ARIAを用いたカスタムフォームコンポーネント
到着地、日付、乗客数、座席
mrsekut.iconmrsekut.icon
ログインフォーム|ユビキタスなログインフォーム
メール受信ボックス|メールの管理インターフェースからARIAパターンを学ぶ
管理画面的な
検索フォーム
mrsekut.icon
フィルターフォーム|ユーザーが満足できるフィルタリング(選択、抽出ほか)
検索結果の絞り込み
zozoのサイドバーみたいなやつmrsekut.icon
アップロードフォーム
経費申請フォーム
「更に追加」などのボタンがあってfieldを増やせるformの話mrsekut.icon
ロジックの話が多く、UXの話はほとんどない(あるにはある)
素のJSを使っているのでかなり冗長
form libraryを使ってたら気にしないで済む点も多い
fieldを削除した際に、どこをfocusするか？
p.305~
本書では、formの見出しにfocusを移動している
1回tabを押したら、一番上のfieldにfocusが移る
長くて複雑なフォーム|応用2:入力に長時間を要するフォーム
長時間ってどれぐらい？
それによるmrsekut.icon